<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrap {
            width: 600px;
            margin: 50px auto;
        }

        .nav {
            display: flex;
            line-height: 40px;
            text-align: center;
        }

        .nav li {
            flex: 1;
            border: 1px solid #333;
        }

        .nav li+li {
            border-left: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="nav">
            <li>nav_1</li>
            <li>nav_2</li>
            <li>nav_3</li>
            <li>nav_4</li>
            <li>nav_5</li>
            <li>nav_6</li>
        </ul>
    </div>
</body>
<script>
    // 点击每个li 打印li本身及其下标

    // debugger;
    var nav = document.getElementsByClassName("nav")[0];
    var liList = nav.getElementsByTagName("li");
    console.log(liList);

    // 多元素循环绑定事件
    debugger;
    for (let i = 0; i < liList.length; i++) {
        let li = liList[i]; // 获取每一个
        // 1. 页面加载时事件只做绑定 -> 点击时才触发(加载时不触发)
        li.onclick = function () { // 给每一个绑事件
            debugger;
            // 3. 当点击任意一个li 触发绑定的事件 -> 执行函数 -> 函数作用域没有li和i -> 向外跳一层找全局作用域 (li  i)
            console.log(li, i);
        }
    }

    // console.log("等页面加载完毕", li, i); 


    // {
    //     let i = 0;
    //     {
    //         let li = liList[i]; // 0
    //         li.onclick = function () { // 给每一个绑事件
    //             debugger;
    //             // 3. 当点击任意一个li 触发绑定的事件 -> 执行函数 -> 函数作用域没有li和i -> 向外跳一层找父作用域 (块级 li  i)
    //             console.log(li, i);
    //         }
    //     }
    // }
    // {
    //     let i = 1;
    //     {
    //         let li = liList[i]; // 0
    //         li.onclick = function () { // 给每一个绑事件
    //             debugger;
    //             // 3. 当点击任意一个li 触发绑定的事件 -> 执行函数 -> 函数作用域没有li和i -> 向外跳一层找父作用域 (块级 li  i)
    //             console.log(li, i);
    //         }
    //     }
    // }
    // {
    //     let i = 2;
    //     {
    //         let li = liList[i]; // 0
    //         li.onclick = function () { // 给每一个绑事件
    //             debugger;
    //             // 3. 当点击任意一个li 触发绑定的事件 -> 执行函数 -> 函数作用域没有li和i -> 向外跳一层找父作用域 (块级 li  i)
    //             console.log(li, i);
    //         }
    //     }
    // }




</script>

</html>